<?php
//======================================================================================
//
// Function: List data
//
// Programmer: JKJ
// Date : 2020-06-29
//
// Copyright Reeft A/S (c) - 2020
//======================================================================================
//
// http://www.openjs.com/scripts/events/keyboard_shortcuts/
// https://htmlcolorcodes.com/color-names/
// http://www.tl-it.nl/docs/files/jqplot-core-js.html#Series.yaxis
// http://www.jqplot.com/docs/files/jqplot-core-js.html
//
//
// Chart.js
// https://www.chartjs.org/docs/latest/axes/styling.html?h=grid
// https://jsfiddle.net/crabbly/kL68ey5z/ -- PDF save
// https://github.com/emn178/chartjs-plugin-labels - text on pie
// https://emn178.github.io/chartjs-plugin-labels/samples/demo/
//
// https://stackoverflow.com/questions/34479079/how-do-i-find-last-monday-using-momentjs
//
//======================================================================================
// General config
//======================================================================================
include "config/config.php";
//======================================================================================
// Get input
//======================================================================================
if (isset($_REQUEST["fromdate"])) $fromDate = $_REQUEST["fromdate"];
else $fromDate = 0;
if (isset($_REQUEST["todate"])) $toDate = $_REQUEST["todate"];
else $toDate = 0;
if (isset($_REQUEST["input_hub_sertyp"])) $input_hub_sertyp = $_REQUEST["input_hub_sertyp"];
else {
$input_hub_sertyp = '';
}
//======================================================================================
// Check input
//======================================================================================
//======================================================================================
// Set header texts
//======================================================================================
//======================================================================================
// Check if user is logged in?
//======================================================================================
include "login_check.php";
//======================================================================================
// Get session variables
//======================================================================================
include "include/getsession.php";
$datahub_text0108 = 'Jan';
//======================================================================================
// Set language
//======================================================================================
include "include/set_language.php";
// Make kl lowercase
$datahub_text0108_lower = strtolower($datahub_text0108);
//======================================================================================
// Set defaults
//======================================================================================
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title><?php echo $datahub_text0001 ?></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="REEFTvisual - Stoptime">
<meta name="author" content="REEFT A/S">
<link rel="icon" href="images/favicon.ico">
<link href="css/custom.css" rel="stylesheet">
<!-- Bootstrap / jQuery -->
<link href="css/bootstrap4.3.1/css/bootstrap.custom.min.css" rel="stylesheet">
<!--<link href="css/bootstrap4.3.1/css/themes/bootstrap.custom.min.css" rel="stylesheet">-->
<link href="css/style.css" rel="stylesheet">
<link href="css/bootstrap4.3.1/css/normalize.css" rel="stylesheet" type="text/css">
<link href="css/sticky-footer.css" rel="stylesheet" type="text/css">
<script src="css/fontawesome6.5.1/js/all.min.js"></script>
<script src="css/fontawesome6.5.1/js/sharp-light.min.js"></script>
<script src="css/fontawesome6.5.1/js/sharp-regular.min.js"></script>
<script src="css/fontawesome6.5.1/js/sharp-solid.min.js"></script>
<script src="css/fontawesome6.5.1/js/sharp-thin.min.js"></script>
<link href="css/bootstrap_animation/css/animate.css" rel="stylesheet" type="text/css">
<link href="javascript/chosen/chosen.css" rel="stylesheet" type="text/css">
<link href="javascript/jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css"/>
<script src="javascript/jquery-2.2.4.min.js"></script>
<script src="css/bootstrap4.3.1/js/popper.js"></script>
<script src="css/bootstrap4.3.1/js/bootstrap.min.js"></script>
<script src="javascript/jquery-ui/jquery-ui.min.js"></script>
<script src="javascript/jquery.ui.touch-punch.min.js"></script>
<!--<script src="javascript/moment.min.js"></script>-->
<script src="javascript/moment-with-locales.min.js"></script>
<script src="javascript/moment-duration-format.min.js"></script>
<script src="javascript/number_format/jquery.number.min.js"></script>
<script src="javascript/jquery.scrollTo.min.js"></script>
<script src="javascript/bootstrap-datetimepicker4/build/js/tempusdominus-bootstrap-4.min.js"></script>
<link href="javascript/bootstrap-datetimepicker4/build/css/tempusdominus-bootstrap-4.min.css" rel="stylesheet" type="text/css">
<link href="javascript/daatatables/media/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">
<link href="javascript/daatatables/media/css/fixedHeader.dataTables.min.css" rel="stylesheet" type="text/css">
<link href="javascript/daatatables/Buttons-1.4.2/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css">
<script src="javascript/daatatables/media/js/jquery.dataTables.min.js"></script>
<script src="javascript/daatatables/media/js/dataTables.fixedHeader.min.js"></script>
<script src="javascript/daatatables/Buttons-1.4.2/js/dataTables.buttons.min.js"></script>
<script src="javascript/daatatables/Buttons-1.4.2/js/buttons.flash.min.js"></script>
<script src="javascript/daatatables/JSZip-2.5.0/jszip.min.js"></script>
<script src="javascript/daatatables/pdfmake-0.1.53/pdfmake.min.js"></script>
<script src="javascript/daatatables/pdfmake-0.1.53/vfs_fonts.js"></script>
<script src="javascript/daatatables/Buttons-1.4.2/js/buttons.html5.min.js"></script>
<script src="javascript/daatatables/Buttons-1.4.2/js/buttons.print.min.js"></script>
<script src="javascript/chosen/chosen.jquery.min.js" type="text/javascript"></script>
<script src="javascript/viewer-master/dist/viewer.min.js"></script>
<link href="javascript/viewer-master/dist/viewer.min.css" rel="stylesheet">
<script src="javascript/ajaxq/ajaxq.js"></script>
<link id="scrollUpTheme" rel="stylesheet" href="javascript/scrollup-master/dist/css/themes/image.css">
<script src="javascript/scrollup-master/dist/jquery.scrollUp.js"></script>
<script src="javascript/shortcut.js"></script>
<script type="text/javascript" src="javascript/chart.js_master/chart.min.js"></script>
<script type="text/javascript" src="javascript/chart.js_master/utils.js"></script>
<script type="text/javascript" src="javascript/jspdf.min.js"></script>
<script type="text/javascript" src="javascript/chart.js_master/chartjs-plugin-datalabels.min.js"></script>
<script src="javascript/_reeft_js/set_font_awesome_icon_type.js"></script>
<style>
.image-style-custom
{
filter: drop-shadow(6px 6px 5px black)
}
.dropdown-item.active {
background-color: ForestGreen;
}
.btn-custom-wide {
height:60px;
width:210px;
}
.small-text {
font-size: 8px;
}
</style>
<script language="JavaScript">
//=============================================================================
// Globals
//=============================================================================
$(function () {
$.scrollUp({
scrollName: 'scrollUp', // Element ID
//topDistance: '1800', // Distance from top before showing element (px)
//topSpeed: 300, // Speed back to top (ms)
scrollDistance: '300', // Distance from top before showing element (px)
scrollSpeed: 300, // Speed back to top (ms)
animation: 'fade', // Fade, slide, none
animationInSpeed: 200, // Animation in speed (ms)
animationOutSpeed: 200, // Animation out speed (ms)
scrollText: false, //'Scroll to top', // Text for element
activeOverlay: false, // Set CSS color to display scrollUp active point, e.g '#00FFFF'
});
});
load = 0;
//-----------------------------------------------------------------------------------------
// Input params
//-----------------------------------------------------------------------------------------
var global_fromDate = '<?php echo $fromDate ?>';
var global_toDate = '<?php echo $toDate ?>';
var global_sertyp = '<?php echo $input_hub_sertyp ?>'
if ( global_sertyp == '' ) {
global_sertyp = '*ALL';
}
//-----------------------------------------------------------------------------------------
//=============================================================================
// Misc chart setup
//=============================================================================
var DFT_DISPLAY_PARETO_ON_BAR_CHART = 'N';
var DFT_DISPLAY_PARETO_ON_BAR_CHART = 'Y';
var DFT_DISPLAY_TICKS_ON_RIGHT_SIDE_BAR_CHART_FOR_TIME = 'Y';
var DFT_DISPLAY_LABLES_ON_PARETO_CHART_ON_BAR_CHART = 'Y';
if ( DFT_DISPLAY_PARETO_ON_BAR_CHART == 'Y' ) {
var displayPareto = true;
} else {
var displayPareto = false;
}
if ( DFT_DISPLAY_LABLES_ON_PARETO_CHART_ON_BAR_CHART == 'Y' ) {
var dftDisplayLablesOnParetoChartOnBarChart = true;
} else {
var dftDisplayLablesOnParetoChartOnBarChart = false;
}
if ( DFT_DISPLAY_TICKS_ON_RIGHT_SIDE_BAR_CHART_FOR_TIME == 'Y' ) {
var dftDisplayTicksOnRightSideBarChartForTime = true;
} else {
var dftDisplayTicksOnRightSideBarChartForTime = false;
}
//-----------------------------------------------------------------------------------------
// Reset chart objects
//-----------------------------------------------------------------------------------------
var chart_bar = null;
var chartPDFname = null;
//-----------------------------------------------------------------------------------------
// Move PHP arrays to javascript
//-----------------------------------------------------------------------------------------
var DFT_CANVAS_HEIGHT = '<?php echo $DFT_CANVAS_HEIGHT; ?>';
var DFT_DURATIONTIME = <?php echo $DFT_DURATIONTIME; ?>;
var DFT_PIE_TITLE_HEADER_DISPLAY = '<?php echo $DFT_PIE_TITLE_HEADER_DISPLAY; ?>';
var DFT_LEGEND_POSITION_DISPLAY = '<?php echo $DFT_LEGEND_POSITION_DISPLAY; ?>';
var DFT_LEGEND_POSITION = '<?php echo $DFT_LEGEND_POSITION; ?>';
//-----------------------------------------------------------------------------------------
// Msic chart setup
//-----------------------------------------------------------------------------------------
var globalbarData = null;
var globalbarData1 = null;
var globalbarColor = null;
var globalbarLabelText = null;
//-----------------------------------------------------------------------------------------
// General chart settings - also look in .ready for more settings and hiding
//-----------------------------------------------------------------------------------------
durationTime = 2000;
pie_title_header_display = true;
legend_position = 'top';
legend_position_display = true;
//-----------------------------------------------------------------------------------------
var pieData = null;
var pieColor = null;
var pieToolTip = null;
var maxValueBar = 0;
//=============================================================================
// Get data for reason
//=============================================================================
function processReasonData()
{
fromDate = '<?php echo $fromDate ?>';
toDate = '<?php echo $toDate ?>';
bar_title_headerText = '<?php echo $datahub_text0218 ?>';
maxValueBarAdjust = 10;
maxValueBarAdjustMobile = 5;
pointLabelsShow = false;
barLabelText = '<?php echo $datahub_text0155 ?>';
yAxesDisplay = false;
gridLinesDisplay = false;
chartPDFname = 'webservice_usage.pdf';
// Set bar header
bar_title_header = bar_title_headerText ;
var search_arg = $('#input-HUB_SERTYP').val();
var hub_sertyp = $('#input-HUB_SERTYP').val();
var searchBy = 'SERTYP';
if ( search_arg == '*ALL' ) {
var search_arg = '';
var searchBy = '';
var hub_sertyp = '';
}
// Create param list
parmData = 'hub_WEBNAM=' + ''
+ '&myPageGoTo=' + '0'
+ '&myOffSet=' + '0'
+ '&myPageSize=' + '500'
+ '&hub_sertyp=' + hub_sertyp
+ '&search_arg=' + search_arg
+ '&callType=' + '*CHART'
+ '&orderBy=' + '2'
+ '&searchBy=' + searchBy
;
$.ajax({
url: "HUB_WEBCNT_maintain_get.php",
type: "GET",
data: parmData,
dataType: "json",
cache: false,
beforeSend: function( xhr ) {
}
})
.done(function( jsonData ) {
var returnCode = jsonData.header.returnCode;
// Define arrays
arr = [];
arr1 = [];
arr2 = [];
arrColor = [];
arrToolTip = [];
total_HUB_COUNT = 0;
myID = '';
c = 0;
default_color = '';
var myID = 'all-button-detail';
var headerText01 = '<?php echo $datahub_text0147 ?>';
var headerText02 = '<?php echo $datahub_text0148 ?>';
// Reset
HTMLline02 = '<table id="REEFTvisual_data" class="table table-bordered table-striped table-hover">';
HTMLline02 += '<thead>'
+ '<tr class="bg-primary text-white font-weight-bold text-left">'
+ '<th>'
+ '<?php echo $datahub_text0178 ?>'
+ '</th>'
+ '<th>'
+ headerText01
+ '</th>'
+ '<th>'
+ headerText02
+ '</th>'
+ '<th class="text-left">'
+ '</th>'
+ '</tr>'
+ '</thead>'
+ '<tbody>'
;
// Get what to show
current_HUB_SERTYP = $('#input-HUB_SERTYP').val();
var myCMPNO = jsonData.header.myCMPNO;
var myCMPNO_Name = jsonData.header.myCMPNO_Name;
var myFile_name = jsonData.header.myFile_name
var myFile_description = jsonData.header.myFile_description
var returnCode = jsonData.header.returnCode;
var returnMsg = jsonData.header.returnMsg;
var entries_found = jsonData.header.entries_found;
var response_sec = jsonData.header.response_sec;
var myTotalRecordsFound = jsonData.header.myTotalRecordsFound;
var myTotalPages = jsonData.header.myTotalPages;
var myPageSize = jsonData.header.myPageSize;
// Response time
$('#response-time-text').html( 'Response time: ' + response_sec ).css('font-size','0.8em');
// Set Company and file information
if ( myCMPNO != '' ) {
$('#data-hub-company-information').html( '<span title="' + myFile_name + ' - ' + myFile_description + '">' + myCMPNO_Name + ' (' + myCMPNO + ')' + '</span>' ).css('font-size','1.3em');
}
// Create header buttons
var HTMLlineButtons = '';
var selectedButtonClass = 'btn-dark';
$.each( jsonData.header_buttons, function( index, object ){
var buttonLine = object.buttonLine;
var buttonCount = object.buttonCount;
var buttonPages = object.buttonPages;
var save_buttonLine = buttonLine;
if ( buttonLine == '*NONE' ) {
buttonLine = 'No type';
}
var selectButtonLineID = 'select-button-line-id-' + buttonLine;
HTMLlineButtons += '<button title="Search for..." type="button" style="cursor:default" id="' + selectButtonLineID + '" class="btn ' + selectedButtonClass + ' select-button-line btn-sm mr-1 mb-1" onclick="setSearchWord(\'' + save_buttonLine + '\',\'' + '0' + '\',\'' + '' + '\',\'' + buttonPages + '\',\'' + buttonCount + '\')">'
+ ' <b>' + buttonLine + '</b>' + ' (' + buttonCount + ')'
+ '</button>'
});
var selectButtonLineID = 'select-button-line-id-' + 'reset' + '_';
HTMLlineButtons += '<button title="Search for..." type="button" style="cursor:default" id="' + selectButtonLineID + '" class="btn ' + selectedButtonClass + ' select-button-line btn-sm mr-1 mb-1" onclick="setSearchWord(\'' + '*ALL' + '\',\'' + '0' + '\',\'' + '' + '\',\'' + '0' + '\',\'' + '0' + '\')">'
+ 'Show all'
+ '</button>'
$('#data-result-button-lines').html(HTMLlineButtons);
$.each( jsonData.pareto, function( index, object ){
if ( $('#input-HUB_SERTYP').val() == '*ALL' ) {
current_HUB_SERTYP = object.HUB_SERTYP;
}
if ( current_HUB_SERTYP == object.HUB_SERTYP ) {
var chart_HUB_COUNT = object.HUB_COUNT;
var chart_HUB_SERTYP = object.HUB_SERTYP;
var key_HUB_WEBNAM = object.HUB_WEBNAM;
// Reason code data
var chart_HUB_WEBNAM = object.HUB_WEBNAM;
var default_color = object.HUB_CHRCOL;
var char_HUB_CHRTXT = object.HUB_CHRTXT ;
var total_chart_HUB_COUNT = object.HUB_COUNT;
var calc_sum = object.calc_sum;
var pareto_par = object.calc_par;
var pareto_pct = object.calc_pct;
// console.log(chart_HUB_COUNT + ' ' + chart_HUB_SERTYP + ' ' + pareto_pct + ' ' );
// Just in case
if ( default_color == '' ) {
default_color = 'tomato';
// console.log('Default color added...')
}
if ( displayPareto == false ) {
var pareto_pct = -1000;
}
var color = default_color;
// Set array
arr.push(parseInt(chart_HUB_COUNT));
if ( char_HUB_CHRTXT != '' ) {
chart_HUB_WEBNAM = char_HUB_CHRTXT;
}
arr1.push(chart_HUB_WEBNAM + ' (' + chart_HUB_COUNT + ')' );
arr2.push(parseFloat(pareto_pct));
arrColor.push(color);
arrToolTip.push('none');
// Total
total_HUB_COUNT = parseInt(total_HUB_COUNT) + parseInt(chart_HUB_COUNT); // Add to total
// Button id
c++;
myID = 'trans-button-' + c;
HTMLline02 += '<tr>'
+ '<td class="text-left">'
+ chart_HUB_WEBNAM
+ '</td>'
+ '<td class="text-center">'
+ chart_HUB_COUNT
+ '</td>'
+ '<td class="text-center">'
+ chart_HUB_SERTYP
+ '</td>'
+ '<td class="text-left">'
+ '<button class="btn btn-primary trans-button-list line-trans-button-list" id="' + myID + '" onclick="showTranscations(\'' + chart_HUB_WEBNAM + '\'' + ',\'' + chart_HUB_WEBNAM + '\'' + ',\'' + myID + '\')">' + '<?php echo $datahub_button_show_details ?>' + '</button>'
+ '</td>'
+ '</tr>'
;
}
});
HTMLline02 += '</tbody>'
+ '<tfooter>'
+ '<tr class="bg-primary text-white">'
+ '<td class="text-left font-weight-bold">'
+ 'Total'
+ '</td>'
+ '<td class="text-center font-weight-bold">'
+ total_HUB_COUNT
+ '</td>'
+ '<td class="text-center font-weight-bold">'
+ '</td>'
+ '<td class="text-center font-weight-bold">'
+ ''
+ '</td>'
+ '</tr>'
;
HTMLline02 += '</tfooter>'
+ '</table>'
// Show yourself to the world, you little fvcker
$('#data-result').html(HTMLline02);
setDataTablesReason();
maxValueBar = Math.max.apply(Math,arr);
maxValueBar = parseInt(maxValueBar) + 1;
// Create chart
barData = arr;
barData1 = arr1;
barData2 = arr2;
barColor = arrColor;
barToolTip = arrToolTip;
// Save for update data
globalbarData = barData;
globalbarData1 = barData1;
globalbarData2 = barData2;
globalbarColor = barColor;
globalbarLabelText = barLabelText;
maxValueBar = Math.max.apply(Math,barData) + maxValueBarAdjustMobile;
// Reset messasge area
$('#canvas-wrapper-message').html('');
// Create chart
createChart_reason_bar();
})
.always(function( jsonData ) {
//console.log('I am always..');
})
.fail(function( xhr, ajaxOptions, thrownError ) {
console.log('I am failed..');
console.log( xhr );
});
}
//=============================================================================
// Create chart - reason code
//=============================================================================
function createChart_reason_bar() {
$('#downloadPdf').removeClass('d-none');
maxRotationValue = 75; // No rotate
minRotationValue = 75;
renderText = '#000';
renderText = '#fff';
var color = barColor;
var barChartData = {
labels: barData1,
datasets: [
{
label: barLabelText,
backgroundColor: barColor,
borderWidth: 1,
data: barData
}
]
};
// Setup the chart (make sure config is global)
//const config = {
config = {
data: {
labels: barData1,
datasets:
[{
yAxisID: 'y1',
label: '<?php echo $datahub_text0147 ?>',
type: 'bar',
data: barData,
backgroundColor: barColor,
borderWidth: 1,
order: 10,
barPercentage: 0.8,
categoryPercentage: 0.8,
datalabels: {
display: false,
}
},
{
yAxisID: 'y2',
type: 'line',
label: 'Pct',
data: barData2,
borderColor: '#2B6699',
order: 5,
cubicInterpolationMode: 'monotone',
tension: 0.4,
datalabels: {
display: dftDisplayLablesOnParetoChartOnBarChart,
backgroundColor: '#2B6699',
borderColor: '#000',
borderWidth: 1,
borderRadius: 4,
color: 'white',
font: {
weight: 'bold'
},
//formatter: Math.round,
padding: 4,
formatter: function(value, context) {
let new_value = value.toFixed(0) + '%';
return new_value;
}
},
}
]},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
tooltip: {
enabled: true,
yPadding: 10,
xPadding: 10,
backgroundColor: '#000',
titleFontColor: '#000',
bodyFontColor: '#000',
borderColor: '#ccc',
borderWidth: 2,
position: 'nearest',
callbacks: {
label: function(tooltipItem) {
if (tooltipItem.datasetIndex === 0) {
// Tooltip for the bar dataset
return "<?php echo $datahub_text0147 ?>: " + tooltipItem.raw;
}
else if (tooltipItem.datasetIndex === 1) {
// Tooltip for the line dataset
return 'Percentage: ' + tooltipItem.raw + '%';
}
},
}
},
// Change options for ALL labels of THIS CHART
legend:
{
display: false,
position: 'bottom',
},
title: {
display: true,
text: bar_title_header,
font: {
size: 40,
}
},
labels: {
display: true,
render: 'value',
fontSize: 14,
fontStyle: 'bold',
fontColor: renderText,
}
},
scales: {
y1: {
type: 'linear',
position: 'left',
beginAtZero: true,
title: {
display: true,
text: '<?php echo $datahub_text0147 ?>'
},
ticks: {
display: dftDisplayTicksOnRightSideBarChartForTime,
beginAtZero: false,
fontColor: '#ffbaa2',
},
grid: {
display: false
}
},
y2: {
display: displayPareto,
type: 'linear',
position: 'right',
min: 0,
max: 100,
ticks: {
beginAtZero: true,
stepSize: 10,
fontColor: '#ffbaa2',
callback: function(value, index, values) {
return value + ' %';
}
},
title: {
display: true,
text: 'Pareto %'
}
},
xAxes:
{
ticks:
{
autoSkip: false,
maxRotation: 30,
minRotation: 25
}
}
}
}
};
// Render init block
var ctx = document.getElementById('show-chart-here').getContext('2d');
chart_bar = new Chart(ctx,config);
// Hide Pareto chart
toggleParetoVisibility(false)
}
//=============================================================================
// Show / hide pareto
//=============================================================================
function toggleParetoVisibility(showPareto) {
if (!showPareto) {
// Hide the y2 scale and dataset
config.options.scales.y2.display = false;
config.data.datasets = config.data.datasets.filter(dataset => dataset.yAxisID !== 'y2');
// Hide button
$('#hide-pareto-button').addClass('d-none');
$('#show-pareto-button').removeClass('d-none');
} else {
// Hide button
$('#hide-pareto-button').removeClass('d-none');
$('#show-pareto-button').addClass('d-none');
// Show the y2 scale and dataset
config.options.scales.y2.display = true;
// Re-add the y2 dataset if it was removed
if (!config.data.datasets.find(dataset => dataset.yAxisID === 'y2')) {
config.data.datasets.push({
yAxisID: 'y2',
type: 'line',
label: 'Pct',
data: barData2,
borderColor: '#2B6699',
order: 5,
cubicInterpolationMode: 'monotone',
tension: 0.4,
datalabels: {
display: dftDisplayLablesOnParetoChartOnBarChart,
backgroundColor: '#2B6699',
borderColor: '#000',
borderWidth: 1,
borderRadius: 4,
color: 'white',
font: { weight: 'bold' },
padding: 4,
formatter: function (value, context) {
return value.toFixed(0) + '%';
}
}
});
}
}
// Update the chart
chart_bar.update();
}
//=============================================================================
// Set datatables
//=============================================================================
function setDataTablesReason()
{
$('#REEFTvisual_data').DataTable({
"responsive": true,
"fixedHeader": false,
"lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
"iDisplayLength": 25,
"processing": true,
"dom": '<"toolbar">lfi<bottom>Bp<"clear">',
"order": [[ 1, "desc" ]],
"columnDefs": [
{
"targets": [ 3 ],
"visible": true,
"searchable": false,
"orderable": false
}
],
"language":
{
"sProcessing": "<?php echo $datahub_datatable_Processing ?>",
"sLengthMenu": "<?php echo $datahub_datatable_LengthMenu ?>",
"sZeroRecords": "<?php echo $datahub_datatable_ZeroRecords ?>",
"sInfo": "<?php echo $datahub_datatable_Info ?>",
"sInfoEmpty": "<?php echo $datahub_datatable_InfoEmpty ?>",
"sInfoFiltered": "<?php echo $datahub_datatable_InfoFiltered ?>",
"sInfoPostFix": "<?php echo $datahub_datatable_InfoPostFix ?>",
"sLoadingRecords": "<?php echo $datahub_datatable_Processing ?>",
"sSearch": "<?php echo $datahub_datatable_Search ?>",
"sUrl": "<?php echo $datahub_datatable_Url ?>",
"oPaginate": {
"sFirst": "<?php echo $datahub_datatable_First ?>",
"sPrevious": "<?php echo $datahub_datatable_Previous ?>",
"sNext": "<?php echo $datahub_datatable_Next ?>",
"sLast": "<?php echo $datahub_datatable_Last ?>"
}
},
"rowCallback": function(row, data, index)
{
},
"preDrawCallback": function(settings)
{
},
"initComplete": function ()
{
},
"buttons": [
{
title: 'REEFTvisual_data_PDF',
extend: 'pdf',
text: '<img src="images/pdf_logo.png" height="25"> PDF',
orientation: 'landscape',
exportOptions: {
modifier: {
page: 'all'
}
}
},
{
title: 'REEFTvisual_data_Excel',
extend: 'excel',
text: '<img src="images/microsoft_excel_logo.png" height="25"> Excel'
},
{
extend: 'copy',
text: '<img src="images/copy.png" height="25"> Copy to Clipboard'
}
]
});
// Set header
$('#REEFTvisual_data').append('<caption style="caption-side: top"><div class="text-center font-weight-bold">' + bar_title_header + '</div></caption>');
}
//=============================================================================
// Log off
//=============================================================================
function signoff()
{
window.location.href = "logout.php";
}
//=============================================================================
// Load page
//=============================================================================
function loadPage(url, p1, p2, p3)
{
window.location.href = url;
}
//=============================================================================
// Set default date
//=============================================================================
function setDefaultDate( defaultHours ) {
// Set default from/to date
default_fromDate = moment().subtract(defaultHours, 'hours').format("YYYY-MM-DD HH:mm");
$('#fromdate').datetimepicker('date', default_fromDate );
$('#fromdateX').addClass('animated pulse border border-danger rounded');
// After animation
$('#fromdateX').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
function() {
$('#fromdateX').removeClass( 'animated pulse border border-danger rounded' );
}
);
default_toDate = moment().add(0, 'days').add(10, 'minutes').subtract(0, 'year').format("YYYY-MM-DD HH:mm");
$('#todate').datetimepicker('date', default_toDate );
$('#fromdate').datetimepicker('date', default_fromDate );
$('#fromdateX').addClass('animated pulse border border-danger rounded');
$('#todate').datetimepicker('date', default_toDate );
}
//=============================================================================
// Scroll to something
//=============================================================================
function scrollToSomething( target )
{
thisID = '#' + target;
$.scrollTo( thisID, 1000);
}
//=============================================================================
// Create PDF
//=============================================================================
function downloadPDF() {
// Get size of report page
var reportPageHeight = $('#canvas-wrapper').innerHeight();
var reportPageWidth = $('#canvas-wrapper').innerWidth();
// Create a new canvas object that we will populate with all other canvas objects
var pdfCanvas = $('<canvas />').attr({
id: "canvaspdf",
width: reportPageWidth,
height: reportPageHeight
});
// Keep track canvas position
var pdfctx = $(pdfCanvas)[0].getContext('2d');
var pdfctxX = 0;
var pdfctxY = 0;
var buffer = 100;
// For each chart.js chart
$("canvas").each(function(index) {
// Get the chart height/width
var canvasHeight = $(this).innerHeight();
var canvasWidth = $(this).innerWidth();
// Draw the chart into the new canvas
pdfctx.drawImage($(this)[0], pdfctxX, pdfctxY, canvasWidth, canvasHeight);
pdfctxX += canvasWidth + buffer;
// Our report page is in a grid pattern so replicate that in the new canvas
if (index % 2 === 1) {
pdfctxX = 0;
pdfctxY += canvasHeight + buffer;
}
});
// Create new pdf and add our new canvas as an image
var pdf = new jsPDF('l', 'pt', [reportPageWidth, reportPageHeight]);
pdf.addImage($(pdfCanvas)[0], 'PNG', 0, 0);
// download the pdf
pdf.save(chartPDFname);
}
//=============================================================================
// Make first letter uppercase
//=============================================================================
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
//=============================================================================
// Reset messasge
//=============================================================================
function resetMessage()
{
$('#message-text').html('').removeClass('border border-danger rounded font-weight-bold mt-2 mb-1 p-2');
}
//=============================================================================
// Full screen popup
//=============================================================================
function popUpCenter(url, p1, p2, p3)
{
var v1_w = screen.availWidth;
var v1_h = screen.availHeight;
if ( parseInt(v1_w) > 1800 ) {
v1_w = 1800;
v1_h = v1_h - 200;
v1_center = v1_w/0.8;
}
// Center popup as good as possible
var left = (screen.width - v1_w) / 2;
var top = (screen.height - v1_h) / 4;
var winname = 'win_' + url;
params = 'width='+v1_w;
params += ', height='+v1_h;
params += ', top=' + top + ', left=' + left;
params += ', fullscreen=yes';
params += ',scrollbars=1';
overview_win = window.open(url,winname, params);
if (window.focus) {overview_win.focus()}
return false;
}
//=============================================================================
// screen popup - center - bigger
//=============================================================================
function popUpCenterBig(url, p1, p2, p3)
{
var v1_w = screen.availWidth;
var v1_h = screen.availHeight;
// Get 25%
v1_w_pct = v1_w * 0.18;
v1_w_new = v1_w - v1_w_pct;
if ( v1_w_new < 1 ) {
v1_w_new = 1800;
}
v1_w = v1_w_new;
v1_h = v1_h - 200;
v1_center = v1_w/0.8;
// Center popup as good as possible
var left = (screen.width - v1_w) / 2;
var top = (screen.height - v1_h) / 4;
var winname = 'win_' + url;
params = 'width='+v1_w;
params += ', height='+v1_h;
params += ', top=' + top + ', left=' + left;
params += ', fullscreen=yes';
params += ',scrollbars=1';
// Create URL
url = url + '?webnam=' + p1 + '&input_hub_sertyp=' + p3;
if ( p2 == 'new-tab' ) {
overview_win = window.open(url,winname);
} else {
overview_win = window.open(url,winname, params);
}
if (window.focus) {overview_win.focus()}
return false;
}
//=============================================================================
// Set search word
//=============================================================================
function setSearchWord( input_search, input_goto, input_button_number, input_totalPages, input_count )
{
// Set webserver type
$('#input-HUB_SERTYP').val( input_search );
chart_bar.destroy();
processReasonData();
}
//=============================================================================
// Show transcations
//=============================================================================
function showTranscations(url, p1, p2, p3)
{
var url = 'hub_webtrn_maintain.php';
var p1 = p1;
var p2 = 'new-win';
var p3 = '';
popUpCenterBig(url, p1, p2, p3);
}
//=============================================================================
// Set clock
//=============================================================================
function updateClock() {
$('#current-time').html(moment().format('DD-MM-YYYY HH:mm:ss'));
}
//=============================================================================
// jQuery - Ready
//=============================================================================
$(document).ready(function()
{
// Set webserver type
$('#input-HUB_SERTYP').val( global_sertyp );
// Set size of canvas
$('#canvas-wrapper').css('height','600px');
//-----------------------------------------------------------------------
// Start the clock
//-----------------------------------------------------------------------
updateClock();
setInterval(function() {
updateClock();
}, 1000);
//-----------------------------------------------------------------------
// Set input fields
$('#fromdate').val('<?php echo $fromDate ?>');
$('#todate').val('<?php echo $toDate ?>');
//-----------------------------------------------------------------------
// Set font awesome icon type
//-----------------------------------------------------------------------
// Value is from config/config.php
var iconType = '<?php echo $DFT_SET_FONT_AWESOME_ICON_TYPE ?>';
setFontAwesomeIconType( iconType );
//-----------------------------------------------------------------------
//-----------------------------------------------------------------------
// Get some chart data
//-----------------------------------------------------------------------
processReasonData();
// Set short cuts
shortcut.add("Esc",function() {
window.close();
});
// Register the plugin to all charts:
Chart.register(ChartDataLabels);
});
// -->
</script>
</head>
<body>
<div class="container-fluid mt-2 pl-3 pr-3">
<input class="d-none" type="text" id="reference-code-input">
<input class="d-none" type="text" id="reference-name-input">
<input class="d-none" type="text" id="chart-mode">
<input class="d-none" type="text" id="pareto-visible">
<input class="d-none" type="text" id="input-HUB_SERTYP">
<div class="row">
<div class="col-2">
<img src="images/customer-logo.png" class="img-fluid" alt="Customer Logo">
</div>
<div class="col-8 text-center <?php echo $DFT_CLOCK_SIZE ?>">
<i title="<?php echo $session_rand ?>" class="font-awesome-pseudo-class fa-thin fa-clock"></i> <span id="current-time"><?php echo date('d-m-Y h:i:s') ?></span>
</div>
<div class="col-2 text-right">
<div id="home-button" class="btn btn-primary" onclick="window.close()" title="<?php echo $visual_go_to_my_dear_home ?>"><i class="font-awesome-pseudo-class fa-2x fa-thin fa-home"></i></div>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<div id="data-hub-company-information"></div>
</div>
</div>
<div class="card border-muted mt-1 mb-2" id="card-result-area">
<div class="card-header text-muted mb-2">
<div class="row mt-2">
<div class="col-4 h4">
<i class="font-awesome-pseudo-class fa-thin fa-alicorn"></i> <?php echo "$datahub_text0142"; ?>
</div>
<div class="col-4 text-center">
<div id="data-result-button-lines"></div>
</div>
<div class="col-4 text-right">
<div id="response-time-text"></div>
</div>
</div>
</div>
<div class="row mb-2">
<div class="col text-right">
<button type="button" id="show-pareto-button" class="btn btn-primary mr-1" onclick="toggleParetoVisibility(true)">Show pareto</button>
<button type="button" id="hide-pareto-button" class="btn btn-warning mr-1" onclick="toggleParetoVisibility(false)">Hide pareto</button>
<button type="button" id="downloadPdf" class="btn btn-success d-none" onclick="downloadPDF()">Download PDF</button>
</div>
</div>
<div>
<div class="row">
<div class="col-12 text-right">
</div>
</div>
<div class="row">
<div class="col mt-2">
<div id="canvas-wrapper-message"></div>
<div id="canvas-wrapper" style="width:100%" class="">
<canvas id="show-chart-here"></canvas>
</div>
</div>
</div>
</div>
</div>
<div class="card border-muted mb-2" id="card-result-area-table-1">
<!-- table with sum figures -->
<div class="card-body" id="table-header-data">
<div id="html-buttons-goes-here" class="mb-2 text-center"></div>
<div id="data-result"></div>
</div>
</div>
<div class="card border-muted mb-2 d-none" id="card-result-area-table-2">
<div class="d-none" id="sql"></div>
<div class="d-none" id="ent"></div>
<!-- table with detail transactions -->
<div class="card-body">
<div id="data-result-trans"></div>
</div>
</div>
<!-- pseodu empty col -->
<div class="col-2 div-spreder">
</div>
</div>
<!-- ======================================================================================== -->
<!-- Might surface if an ajax call fails -->
<!-- ======================================================================================== -->
<div id="error-text-wrapper" class="d-none">
<div class="border border-danger rounded p-2 bg-light" id="error-text-ajax-call"></div>
</div>
<!-- ======================================================================================== -->
</div>
<!-- Set footer -->
<span id="footer-id">
<?php
include "include/footer.php";
?>
</span>
<!-- Set footer -->
<!-- ========================================================================== -->
<!-- M O D A L S -->
<!-- ========================================================================== -->
</body>
</html>